<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花龙腾航 - 机票预订系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

    body {
      font-family: 'Noto Sans SC', sans-serif;
      background-color: #f8fafc;
    }

    .hero-bg {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
      background-size: cover;
      background-position: center;
    }

    .flight-card {
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .flight-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .tab-active {
      border-bottom: 3px solid #3b82f6;
      color: #3b82f6;
      font-weight: 500;
    }

    .search-box {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .logo-text {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .user-avatar {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    }
    .dropdown-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background-color: white;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      min-width: 200px;
      z-index: 10;
    }

    .dropdown-menu.open {
      display: block;
    }

    .dropdown-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .dropdown-item:hover {
      background-color: #f3f4f6;
    }

    .flight-segment {
      position: relative;
      margin-bottom: 1rem;
    }

    .remove-segment {
      position: absolute;
      right: -10px;
      top: -10px;
      background-color: #ef4444;
      color: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
    }

    .add-segment {
      background-color: #3b82f6;
      color: white;
      border-radius: 0.25rem;
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 0.5rem;
    }
    /* Modal Styles */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;
      justify-content: center;
      align-items: center;
    }

    .modal.open {
      display: flex;
    }

    .modal-content {
      background-color: white;
      border-radius: 0.5rem;
      width: 90%;
      max-width: 500px;
      animation: modalFadeIn 0.3s ease-out;
    }
  </style>
</head>
<body>
<!-- Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-10">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <i class="fas fa-plane text-3xl text-blue-500"></i>
      <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-blue-500 font-medium">首页</a>
      <a href="user_flight_search" class="text-gray-600 hover:text-blue-500">航班查询</a>
      <a href="user_order" class="text-gray-600 hover:text-blue-500">我的订单</a>
      <a href="user_ticket" class="text-gray-600 hover:text-blue-500">我的机票</a>
      <a href="user_member_center" class="text-gray-600 hover:text-blue-500">会员中心</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
        <div class="w-8 h-8 rounded-full user-avatar overflow-hidden">
          <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
          <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
          <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
        </div>
        <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${user.getU_name()}">张先生</span>
        <div class="dropdown-menu" id="dropdown-menu">
          <div class="dropdown-item" onclick="location.href='user_profile'">
            <i class="fas fa-user-cog mr-2"></i> 个人主页
          </div>
          <div class="dropdown-item" onclick="location.href='user_account_manage'">
            <i class="fas fa-cog mr-2"></i> 账号管理
          </div>
          <div class="border-t border-gray-200 my-1"></div>
          <div class="dropdown-item text-red-500" onclick="location.href='user_logout'">
            <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Hero Section with Search -->
<div class="hero-bg py-16 md:py-24 text-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center">
      <h1 class="text-4xl md:text-5xl font-bold mb-4">探索世界，从花龙腾航开始</h1>
      <p class="text-xl md:text-2xl mb-8">享受舒适旅程，体验尊贵服务</p>
    </div>

    <!-- Search Box -->
    <form action="user_flight_search" method="get" class="bg-white rounded-lg p-6 search-box max-w-4xl mx-auto mt-8">
      <div class="flex border-b">
        <button type="button" id="one-way" class="px-4 py-2 font-medium tab-active">单程</button>
        <button type="button" id="round-trip" class="px-4 py-2 font-medium text-gray-500">往返</button>
        <button type="button" id="multi-city" class="px-4 py-2 font-medium text-gray-500">多程</button>
      </div>

      <!-- One Way Form -->
      <div id="one-way-form" class="mt-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">出发城市</label>
            <div class="relative">
              <label>
                <input
                        type="text"
                        name="departureCity"
                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                        placeholder="北京"
                        required
                >
                <i class="fas fa-plane-departure absolute right-3 top-3 text-gray-400"></i>
              </label>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">到达城市</label>
            <div class="relative">
              <label>
                <input
                        type="text"
                        name="arrivalCity"
                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                        placeholder="上海"
                        required
                >
                <i class="fas fa-plane-arrival absolute right-3 top-3 text-gray-400"></i>
              </label>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
            <div class="relative">
              <label>
                <input
                        type="date"
                        name="departureDate"
                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                        required
                >
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-6 flex justify-center">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center">
          <i class="fas fa-search mr-2"></i> 查询航班
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Special Offers -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold text-gray-900">热门航线</h2>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Offer 1 >
    <div-- class="bg-white rounded-lg overflow-hidden flight-card" th:each="flight : ${flights}">
      <div class="relative">
        <img th:src="'static/cities/'+${flight.getArrival_city()}+'1.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-48 object-cover">
      </div>
      <div class="p-4">
        <div class="flex justify-between items-start">
          <div>
            <h3 class="font-bold text-lg" th:text="${flight.getDeparture_city()} + ' → ' + ${flight.getArrival_city()}">北京 → 上海</h3>
            <p class="text-gray-500 text-sm">经济舱</p>
          </div>
          <div class="text-right">
            <span class="text-blue-500 font-bold text-xl" th:text="'¥'+${flight.getEconomy_price()}">¥599</span>
            <p class="text-gray-400 text-xs">明日最低价</p>
          </div>
        </div>
        <div class="mt-4 flex justify-between text-sm text-gray-600">
          <div>
            <i class="fas fa-plane-departure mr-1"></i>
            <span th:text="${flight.getDeparture_time()}">08:00</span>
          </div>
          <div>
            <i class="fas fa-plane-arrival mr-1"></i>
            <span th:text="${flight.getArrival_time()}">10:30</span>
          </div>
        </div>
        <button
                class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium transition duration-300"
                th:onclick="'location.href=\'/TicketOrder/user_booking?f_id=' + ${flight.getF_id()} + '\''"
        >
          立即预订
        </button>
      </div>
    </div-->

  </div>
</div>

<!-- Popular Destinations -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold text-gray-900">热门目的地</h2>
  </div>

  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <div class="relative group overflow-hidden rounded-lg h-48"
         th:classappend="${user.getCity() == null or user.getCity() == ''} ? 'cursor-default' : 'cursor-pointer'">
      <img th:src="'static/cities/'+${Destination1Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Guangzhou" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-white font-bold text-lg" th:text="${Destination1}">三亚</h3>
        <p class="text-gray-200 text-sm" th:text="${price1}">从 ¥499 起</p>
      </div>
      <!-- 有常用城市：跳转搜索页 -->
      <a th:if="${user.getCity() != null and user.getCity() != ''}"
         th:href="'user_flight_search?departureCity=' + ${user.getCity()} + '&arrivalCity=' + ${Destination1} + '&departureDate=' + ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}"
         class="absolute inset-0 z-10">
      </a>
      <!-- 无常用城市：弹出提示框 -->
      <a th:if="${user.getCity() == null or user.getCity() == ''}"
         href="javascript:void(0)"
         onclick="showAddCityModal(event)"
         class="absolute inset-0 z-10">
      </a>
    </div>

    <div class="relative group overflow-hidden rounded-lg h-48"
         th:classappend="${user.getCity() == null or user.getCity() == ''} ? 'cursor-default' : 'cursor-pointer'">
      <img th:src="'static/cities/'+${Destination2Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Guangzhou" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-white font-bold text-lg" th:text="${Destination2}">三亚</h3>
        <p class="text-gray-200 text-sm" th:text="${price2}">从 ¥499 起</p>
      </div>
      <!-- 有常用城市：跳转搜索页 -->
      <a th:if="${user.getCity() != null and user.getCity() != ''}"
         th:href="'user_flight_search?departureCity=' + ${user.getCity()} + '&arrivalCity=' + ${Destination2} + '&departureDate=' + ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}"
         class="absolute inset-0 z-10">
      </a>
      <!-- 无常用城市：弹出提示框 -->
      <a th:if="${user.getCity() == null or user.getCity() == ''}"
         href="javascript:void(0)"
         onclick="showAddCityModal(event)"
         class="absolute inset-0 z-10">
      </a>
    </div>

    <div class="relative group overflow-hidden rounded-lg h-48"
         th:classappend="${user.getCity() == null or user.getCity() == ''} ? 'cursor-default' : 'cursor-pointer'">
      <img th:src="'static/cities/'+${Destination3Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Guangzhou" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-white font-bold text-lg" th:text="${Destination3}">三亚</h3>
        <p class="text-gray-200 text-sm" th:text="${price3}">从 ¥499 起</p>
      </div>
      <!-- 有常用城市：跳转搜索页 -->
      <a th:if="${user.getCity() != null and user.getCity() != ''}"
         th:href="'user_flight_search?departureCity=' + ${user.getCity()} + '&arrivalCity=' + ${Destination3} + '&departureDate=' + ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}"
         class="absolute inset-0 z-10">
      </a>
      <!-- 无常用城市：弹出提示框 -->
      <a th:if="${user.getCity() == null or user.getCity() == ''}"
         href="javascript:void(0)"
         onclick="showAddCityModal(event)"
         class="absolute inset-0 z-10">
      </a>
    </div>

    <div class="relative group overflow-hidden rounded-lg h-48"
         th:classappend="${user.getCity() == null or user.getCity() == ''} ? 'cursor-default' : 'cursor-pointer'">
      <img th:src="'static/cities/'+${Destination4Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Guangzhou" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-white font-bold text-lg" th:text="${Destination4}">三亚</h3>
        <p class="text-gray-200 text-sm" th:text="${price4}">从 ¥499 起</p>
      </div>
      <!-- 有常用城市：跳转搜索页 -->
      <a th:if="${user.getCity() != null and user.getCity() != ''}"
         th:href="'user_flight_search?departureCity=' + ${user.getCity()} + '&arrivalCity=' + ${Destination4} + '&departureDate=' + ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}"
         class="absolute inset-0 z-10">
      </a>
      <!-- 无常用城市：弹出提示框 -->
      <a th:if="${user.getCity() == null or user.getCity() == ''}"
         href="javascript:void(0)"
         onclick="showAddCityModal(event)"
         class="absolute inset-0 z-10">
      </a>
    </div>

  </div>
</div>

<!-- Why Choose Us -->
<div class="bg-gray-50 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-2xl font-bold text-gray-900 mb-8">为什么选择花龙腾航</h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="text-center">
        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
          <i class="fas fa-shield-alt text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">安全可靠</h3>
        <p class="text-gray-500">我们拥有最先进的机队和严格的安全标准，确保您的每一次飞行都安全无忧。</p>
      </div>

      <div class="text-center">
        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
          <i class="fas fa-heart text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">优质服务</h3>
        <p class="text-gray-500">我们训练有素的机组人员将为您提供贴心周到的服务，让您的旅程更加舒适。</p>
      </div>

      <div class="text-center">
        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
          <i class="fas fa-percentage text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">超值优惠</h3>
        <p class="text-gray-500">定期推出特价机票和会员专享优惠，让您以更实惠的价格享受高品质飞行体验。</p>
      </div>
    </div>
  </div>
</div>

<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div>
        <h3 class="text-lg font-bold mb-4 flex items-center">
          <i class="fas fa-plane mr-2 text-blue-400"></i>
          <span class="logo-text">花龙腾航</span>
        </h3>
        <p class="text-gray-400 mb-4">为您提供安全、舒适、便捷的航空旅行服务。</p>
        <div class="flex space-x-4">
          <a href="https://weixin.com" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
          <a href="https://weibo.com" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
          <a href="https://qq.com" class="text-gray-400 hover:text-white"><i class="fab fa-qq"></i></a>
          <a href="https://douyin.com" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-bold mb-4">关于我们</h3>
        <ul class="space-y-2">
          <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
          <li><a href="public_company_profile" class="text-gray-400 hover:text-white">企业文化</a></li>
          <li><a href="public_company_profile" class="text-gray-400 hover:text-white">发展历程</a></li>
          <li><a href="public_job_posting" class="text-gray-400 hover:text-white">招贤纳士</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-bold mb-4">帮助中心</h3>
        <ul class="space-y-2">
          <li><a href="public_faq" class="text-gray-400 hover:text-white">常见问题</a></li>
          <li><a href="public_baggage_regulations" class="text-gray-400 hover:text-white">行李规定</a></li>
          <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
          <li><a href="public_callus" class="text-gray-400 hover:text-white">联系我们</a></li>

        </ul>
      </div>

      <div>
        <h3 class="text-lg font-bold mb-4">联系方式</h3>
        <ul class="space-y-2 text-gray-400">
          <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 客服热线: 19976338635</li>
          <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> ganshenghao888@qq.com</li>
          <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 广东省广州市天河区华南农业大学</li>
        </ul>
      </div>
    </div>

    <div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
      <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 花龙腾航 版权所有</p>
      <div class="flex space-x-6">
        <a href="public_privacy_policy" class="text-gray-400 hover:text-white text-sm">隐私政策</a>
        <a href="public_user_agreement" class="text-gray-400 hover:text-white text-sm">使用条款</a>
        <a href="public_cookie" class="text-gray-400 hover:text-white text-sm">Cookie政策</a>
      </div>
    </div>
  </div>
</footer>

<!-- 弹窗 Modal -->
<div class="modal hidden" id="addCityModal">
  <div class="modal-content">
    <div class="p-6 border-b border-gray-200 flex justify-between items-center">
      <h3 class="text-lg font-medium text-gray-800">确认添加常用城市</h3>
      <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addCityModal')">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="p-6">
      <div class="text-center">
        <i class="fas fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
        <p class="text-gray-700 mb-6">您尚未设置常用城市。请前往个人资料页进行设置。</p>

        <div class="flex justify-center space-x-3">
          <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition" onclick="closeModal('addCityModal')">
            取消
          </button>
          <button type="button" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition" onclick="confirmAddCity()">
            确认前往设置
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="fixed bottom-8 right-8 z-50">
  <button onclick="toggleChat()" class="bg-blue-500 text-white p-4 rounded-full shadow-lg hover:bg-blue-600">
    <i class="fas fa-comment-dots text-2xl"></i>
  </button>

  <div id="chat-window" class="hidden fixed bottom-24 right-8 w-96 bg-white rounded-lg shadow-xl">
    <div class="bg-blue-500 text-white p-4 rounded-t-lg flex justify-between">
      <h3 class="font-bold">智能客服</h3>
      <button onclick="toggleChat()" class="hover:text-blue-200">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="h-96 p-4 overflow-y-auto" id="chat-messages">
      <div class="text-gray-500 text-sm">您好！请问需要什么帮助？</div>
    </div>
    <form id="chat-form" onsubmit="sendMessage(this, event)" class="border-t p-4">
      <div class="flex gap-2">
        <label>
          <input type="text" id="message-input" name="message"
                 class="flex-1 border rounded-lg p-2"
                 placeholder="输入问题..."
                 required
                 maxlength="200">
        </label>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">
          <i class="fas fa-paper-plane"></i>
        </button>
      </div>
    </form>
  </div>
</div>


<script>
  function showAddCityModal(event) {
    event.preventDefault(); // 阻止默认行为
    document.getElementById('addCityModal').classList.remove('hidden');
    document.getElementById('addCityModal').classList.add('open');

  }

  function closeModal(modalId) {
    document.getElementById(modalId).classList.remove('open');
    document.getElementById(modalId).classList.add('hidden');
  }

  function confirmAddCity() {
    window.location.href = '/TicketOrder/user_profile_edit'; // 跳转到编辑页面
  }
</script>

<script>
  // Tab switching functionality
  const tabs = document.querySelectorAll('.flex.border-b button');
  const oneWayForm = document.getElementById('one-way-form');
  const roundTripForm = document.getElementById('round-trip-form');
  const multiCityForm = document.getElementById('multi-city-form');

  document.getElementById('round-trip').addEventListener('click', function() {
    window.location.href = 'user_index2';
  });
  document.getElementById('multi-city').addEventListener('click', function() {
    window.location.href = 'user_index3';
  });

  /*
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      // Remove active class from all tabs
      tabs.forEach(t => t.classList.remove('tab-active'));
      tabs.forEach(t => t.classList.add('text-gray-500'));

      // Add active class to clicked tab
      tab.classList.add('tab-active');
      tab.classList.remove('text-gray-500');

      // Show corresponding form
      if (tab.id === 'one-way') {
        oneWayForm.classList.remove('hidden');
        roundTripForm.classList.add('hidden');
        multiCityForm.classList.add('hidden');
      } else if (tab.id === 'round-trip') {
        oneWayForm.classList.add('hidden');
        roundTripForm.classList.remove('hidden');
        multiCityForm.classList.add('hidden');
      } else if (tab.id === 'multi-city') {
        oneWayForm.classList.add('hidden');
        roundTripForm.classList.add('hidden');
        multiCityForm.classList.remove('hidden');
      }
    });
  });
   */

  // Multi-city flight segments functionality
  const flightSegments = document.getElementById('flight-segments');
  const addSegmentBtn = document.getElementById('add-segment');

  addSegmentBtn.addEventListener('click', () => {
    const segmentCount = flightSegments.children.length;
    if (segmentCount >= 5) {
      alert('最多只能添加5个航段');
      return;
    }

    const newSegment = document.createElement('div');
    newSegment.className = 'flight-segment';
    newSegment.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发城市</label>
                        <div class="relative">
                            <label>
                                <input
                                    type="text"
                                    name="multiDepartureCities[]"
                                    class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                    placeholder="北京"
                                    required
                                >
                                <i class="fas fa-plane-departure absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">到达城市</label>
                        <div class="relative">
                            <label>
                                <input
                                    type="text"
                                    name="multiArrivalCities[]"
                                    class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                    placeholder="上海"
                                    required
                                >
                                <i class="fas fa-plane-arrival absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
                        <div class="relative">
                            <label>
                                <input
                                    type="date"
                                    name="multiDepartureDates[]"
                                    class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                    required
                                >
                            </label>
                        </div>
                    </div>
                </div>
                <div class="remove-segment">
                    <i class="fas fa-times"></i>
                </div>
            `;

    flightSegments.appendChild(newSegment);

    // Add event listener to the new remove button
    const removeBtn = newSegment.querySelector('.remove-segment');
    removeBtn.addEventListener('click', () => {
      if (flightSegments.children.length > 1) {
        flightSegments.removeChild(newSegment);
      } else {
        alert('至少需要一个航段');
      }
    });
  });

  // Simple flight search form validation
  document.querySelector('button[type="submit"]').addEventListener('click', (e) => {
      const activeTab = document.querySelector('.tab-active').id;

      if (activeTab === 'one-way') {
          const from = document.querySelector('#one-way-form input[name="departureCity"]').value;
          const to = document.querySelector('#one-way-form input[name="arrivalCity"]').value;
          const date = document.querySelector('#one-way-form input[type="date"]').value;

          if (!from || !to || !date) {
              e.preventDefault();
              alert('请填写完整的查询信息！');
          }
      } else if (activeTab === 'round-trip') {
          const from = document.querySelector('#round-trip-form input[name="roundDepartureCity"]').value;
          const to = document.querySelector('#round-trip-form input[name="roundArrivalCity"]').value;
          const departureDate = document.querySelector('#round-trip-form input[name="roundDepartureDate"]').value;
          const returnDate = document.querySelector('#round-trip-form input[name="roundReturnDate"]').value;

          if (!from || !to || !departureDate || !returnDate) {
              e.preventDefault();
              alert('请填写完整的查询信息！');
          }
      } else if (activeTab === 'multi-city') {
          const segments = document.querySelectorAll('#multi-city-form .flight-segment');
          let isValid = true;

          segments.forEach(segment => {
              const from = segment.querySelector('input[name="multiDepartureCities[]"]').value;
              const to = segment.querySelector('input[name="multiArrivalCities[]"]').value;
              const date = segment.querySelector('input[name="multiDepartureDates[]"]').value;

              if (!from || !to || !date) {
                  isValid = false;
              }
          });

          if (!isValid) {
              e.preventDefault();
              alert('请填写所有航段的完整信息！');
          }
      }
  });

  // Flight card hover effect
  const flightCards = document.querySelectorAll('.flight-card');

  flightCards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      card.style.transform = 'translateY(-5px)';
      card.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.15)';
    });

    card.addEventListener('mouseleave', () => {
      card.style.transform = '';
      card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
    });
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 用户菜单功能
    const userMenu = document.getElementById('user-menu');
    const dropdownMenu = document.getElementById('dropdown-menu');

    userMenu.addEventListener('click', (event) => {
      event.stopPropagation();
      dropdownMenu.classList.toggle('open');
    });

    document.addEventListener('click', (event) => {
      const isClickInside = userMenu.contains(event.target) || dropdownMenu.contains(event.target);
      if (!isClickInside) {
        dropdownMenu.classList.remove('open');
      }
    });

    // 聊天功能
    const chatWindow = document.getElementById('chat-window');
    const chatForm = document.getElementById('chat-form');
    let isSending = false;

    window.toggleChat = function() {
      chatWindow.classList.toggle('hidden');
      if (!chatWindow.classList.contains('hidden')) {
        document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
      }
    };

    window.sendMessage = async function(form, event) {
      event.preventDefault();

      if (isSending) return false;
      isSending = true;

      const input = document.getElementById('message-input');
      const message = input.value.trim();

      console.log('发送的消息:', message);

      if (!message) {
        alert("请输入有效内容");
        isSending = false;
        return false;
      }

      try {
        addMessage('user', message);
        input.value = '';
        const loader = addMessage('assistant', '<div class="dot-pulse"></div>');

        const contextPath = window.location.pathname.split('/')[1];
        const response = await fetch(`/${contextPath}/ChatServlet`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },
          body: `message=${encodeURIComponent(message)}`
        });

        if (!response.ok) {
          throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }

        const data = await response.text();
        loader.remove();
        addMessage('assistant', data);
      } catch (error) {
        console.error('请求失败:', error);
        addMessage('assistant', `服务暂时不可用（${error.message}）`);
        alert(`请求失败: ${error.message}`);
      } finally {
        isSending = false;
      }
      return false;
    };

    function addMessage(role, content) {
      console.log("添加消息 - 角色:", role, "内容:", content);
      const container = document.getElementById('chat-messages');
      const div = document.createElement('div');
      div.className = `mb-4 flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;

      const contentDiv = document.createElement('div');
      contentDiv.className = role === 'user'
              ? 'bg-blue-500 text-white rounded-lg p-3 max-w-[80%]'
              : 'bg-gray-100 text-gray-800 rounded-lg p-3 max-w-[80%]';

      contentDiv.innerHTML = content;
      div.appendChild(contentDiv);
      container.appendChild(div);

      container.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth'
      });

      return div;
    };

    document.getElementById('message-input').addEventListener('keypress', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        chatForm.requestSubmit();
      }
    });
  });
</script>
</body>
</html>